<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉图片</title>
<style>
/* 容器 <div> - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}

/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:300px;
    background-color:#F5F5F5;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}

/* 图片文字描述的样式 */
.heading{
    padding:15px;
    text-align:center;
}
</style>
</head>
<body>
<div class="dropdown">
    <img src="images/1.jpg" width="120" height="120" alt="">
    <div class="dropdown-content">
        <img src="images/xi.jpg" width="300" height="200" alt="">
        <div class="heading">最美的时光，留给最美的风景！</div>
    </div>
</div>
</body>
</html>